<!DOCTYPE html>
<html class="overflow-hidden">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-允许退货订单详情</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="overflow-hidden">
<div class="register-bar collect-bar">
    <h2 class="header-box pos-abs-tl">
        <a class="go-back-btn sprite-icon" id="forgetGoBack" href="#"></a>
        订单详情
        <span id="settingMenu" class="has-icon sprite-icon"></span>
    </h2>

    <div class="setting-menu pos-abs-tr">
        <span class="arrow-top"></span>
        <a href="#"><i class="sprite-icon index-icon"></i>首页</a>
        <a href="#"><i class="sprite-icon shop-icon"></i>商品分类</a>
        <a href="#"><i class="sprite-icon car-icon"></i>购物车</a>
        <a href="#"><i class="sprite-icon goods-icon"></i>实物订单</a>
        <a href="#"><i class="sprite-icon mine-icon"></i>我的</a>
    </div>
    <div class="collect-cont">
        <div id="wrapper">
            <div id="scroller">
                <div class="refund-box orderIntro-box pad-b10">
                    <div class="orderIntro-infor mar-b10">
                        <span>原订单号：1255412225442222</span>
                        <span>退货单号：1255412225442222</span>
                        <span>退货单状态：<i>允许退货</i></span>
                    </div>
                    <div class="collect-list shopCar-list order-page-list no-padding mar-b10">
                        <h2 class="orderIntro-title orderGroup-title1">退回地址</h2>

                        <div class="orderIntro-area">
                            <span>收货人姓名：张三</span>
                            <span>收货人手机：1332512569</span>
                            <span><i>收货地址：</i>重庆市渝中区九龙坡区珠江华轩E座一楼仓库405号门</span>
                        </div>
                    </div>

                    <div class="shopCar-list no-padding mar-b10 orderIntro-list">
                        <h2 class="orderIntro-title orderGroup-title2">请输入物流信息</h2>

                        <div class="form-list refund-list no-margin">
                            <ul>
                                <li>
                                    <span>物流公司</span>
                                    <label><a href="javascript:;" class="select-btn text-overflow"
                                              id="checkLogistics">选择</a></label>
                                </li>
                                <li>
                                    <span>物流单号</span>
                                    <label><input type="text" placeholder="请输入物流单号" value=""></label>
                                </li>
                                <li>
                                    <span>发货运费</span>
                                    <label><input type="text" placeholder="请输入发货运费" value=""></label>
                                </li>
                                <li style="padding-left: 100px;">
                                    <span style="width: 90px;">承担原发货运费</span>
                                    <label><input type="text" placeholder="请输入承担原发货运费" value=""></label>
                                </li>
                                <li>
                                    <span>付款方式</span>
                                    <label><a href="javascript:;" class="select-btn text-overflow"
                                              id="payType">顺付</a></label>
                                </li>
                                <li>
                                    <span>责任归属</span>
                                    <label><a href="javascript:;" class="select-btn text-overflow" id="responsibility">客户承担运费</a></label>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="collect-list shopCar-list order-page-list no-padding mar-b10">
                        <ul>
                            <li>
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <i class="shopType-sprite-icon group-icon"></i>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                                压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                            <!--<p class="order-id">退货</p>-->

                                            <div class="product-norms text-overflow">蓝色,34码</div>

                                            <p class="collect-price" data-price="148.00">￥148.00元</p>

                                            <div class="number-box pos-abs-br num-text">x2</div>
                                        </div>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <i class="shopType-sprite-icon group-icon"></i>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                                压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                            <p class="order-id">退货</p>

                                            <p class="collect-price" data-price="148.00">￥148.00元</p>

                                            <div class="number-box pos-abs-br num-text">x2</div>
                                        </div>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div class="shopCar-list no-padding mar-b10 orderIntro-list">
                        <div class="form-list refund-list no-margin">
                            <ul>
                                <li>
                                    <span>退款金额</span>
                                    <label class="text-label text-color">￥72.80</label>
                                </li>
                                <li>
                                    <span>退款方式</span>
                                    <label class="text-label text-overflow">退款不退货</label>
                                </li>
                                <li>
                                    <span>退款原因</span>
                                    <label class="text-label text-overflow">质量问题</label>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="shopCar-list no-padding mar-b10">
                        <div class="feedback-intro">
                            <h2 class="feedback-intro-title">退货凭证</h2>

                            <div class="feedback-img">
                                <ul id="uploadImg" class="clearfix imgBasicCls active">
                                    <li class="upload-box">
                                        <a href="javascript:;">
                                            <img data-w="342" data-h="342" src="img/product-img2.jpg">
                                        </a>
                                    </li>
                                    <li class="upload-box">
                                        <a href="javascript:;">
                                            <img data-w="160" data-h="31" src="img/recommend-title.png">
                                        </a>
                                    </li>
                                    <li class="upload-box">
                                        <a href="javascript:;">
                                            <img data-w="238" data-h="588" src="img/add-none.png">
                                        </a>
                                    </li>
                                    <li class="upload-box">
                                        <a href="javascript:;">
                                            <img data-w="342" data-h="342" src="img/product-img5.jpg">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="shopCar-list no-padding mar-b10">
                        <div class="feedback-intro">
                            <h2 class="feedback-intro-title">退货说明</h2>

                            <div class="feedintro-text">包装破损</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="shopDetails-bto pos-abs-bl orderIntro-bto">
        <div class="my-order-btn">
            <a href="javascript:;">查看物流</a>
            <a class="active" href="javascript:;">确认提交</a>
        </div>
    </div>


    <!--选择付款方式-->
    <div class="disk order-disk"></div>
    <div class="refund-type animated animated-bottom refund-type1">
        <h2 class="disk-title">所在地区<a class="close-disk sprite-icon" data-handel="close" href="javascript:;"></a></h2>
        <div class="refund-content">
            <a class="payType active" href="javascript:;">顺付</a>
            <a class="payType" href="javascript:;">到付</a>
        </div>
    </div>

    <!--责任归属-->
    <div class="refund-type animated animated-bottom refund-type2">
        <h2 class="disk-title">所在地区<a class="close-disk sprite-icon" data-handel="close" href="javascript:;"></a></h2>
        <div class="refund-content">
            <a class="responsibility active" href="javascript:;">客户承担运费</a>
            <a class="responsibility" href="javascript:;">商家承担运费</a>
            <a class="responsibility" href="javascript:;">物流公司承担运费</a>
            <a class="responsibility" href="javascript:;">礼仪之邦与商家共同承担运费</a>
        </div>
    </div>

    <!--选择物流公司-->
    <div class="show-disk-box checkShop-bar animated animated-left" style="padding-bottom: 0; background: #FFFFFF;">
        <div class="checkShop-cont" style="padding-top: 40px;">
            <h2 class="disk-title">选择物流
                <a class="close-disk sprite-icon" id="closeDisk" href="javascript:;"></a>
            </h2>

            <div class="swiper-container checkShop-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="responsibility-cont">
                            <div class="responsibility-list">
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                                <span>申通快递</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<a class="telphone none shop-sprite-icon animated shake" href="tel:110"></a>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/box.js"></script>
<script src="js/public.js"></script>
<script src="js/area.js"></script>
<script>
    $(function () {
        var myScroll = publicFuns.newIScroll("#wrapper");
        var mySwiper = publicFuns.newSwiper(".checkShop-swiper", 3);

        //倒计时
        publicFuns.limitTime("#limitTime", "2016/06/16 16:08:05", endFun);
        function endFun() {
            console.log("倒计时结束了！");
        }


        $("a[data-handel='close']").click(function () {
            $(".order-disk").fadeOut();
            $(".refund-type").removeClass("active");
        });

        //选择付款方式
        $("#payType").click(function () {
            $(".order-disk").fadeIn();
            $(".refund-type1").addClass("active");
        });
        $(".payType").click(function () {
            var _this = this;
            $(this).addClass("active").siblings().removeClass("active");
            $(".refund-type1").removeClass("active");
            $(".order-disk").fadeOut(function () {
                $("#payType").text($(_this).text());
            });
        });

        //责任承担
        $("#responsibility").click(function () {
            $(".order-disk").fadeIn();
            $(".refund-type2").addClass("active");
        });
        $(".responsibility").click(function () {
            var _this = this;
            $(this).addClass("active").siblings().removeClass("active");
            $(".refund-type2").removeClass("active");
            $(".order-disk").fadeOut(function () {
                $("#responsibility").text($(_this).text());
            });
        });

        //选择物流
        $("#checkLogistics").click(function () {
            $(".order-disk").fadeIn();
            $(".checkShop-bar").addClass("active");
        });

        $(".responsibility-list").find("span").click(function () {
            var _this = this;
            $(".show-disk-box").removeClass("active");
            $(".order-disk").fadeOut(function () {
                $("#checkLogistics").text($(_this).text());
            });
        });

        $("#closeDisk").click(function () {
            $(".order-disk").trigger("click");
        });


        $(".order-disk").click(function () {
            $(this).fadeOut();
            $(".show-disk-box").removeClass("active");
        });
    });
</script>
</body>
</html>